<template>
  <div class="excel-import-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <excel-import btnText="上传excel文件" @on-load="loadExcel" icon="el-icon-upload2"></excel-import>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in excelImportProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in excelImportMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ExcelImportDemo',
    data() {
      return {
//excel导入组件
        excelImportProps: [
          {name: 'btnText', desc: '默认值："上传"。按钮显示的文字。'},
          {name: 'icon', desc: '默认值：undefined。按钮显示的icon，默认没有icon。'}
        ],
        excelImportMethods: [
          {name: 'on-load', desc: '参数：[{excel数据}]。导入excel成功后触发。excel数据包含表头和表格数据'}
        ],
      }
    },
    methods: {
//excel导入相关函数 ↓↓↓↓↓
      loadExcel(arr) {
        console.log('导入的excel数据', arr);
      },
      //excel导入相关函数 ↑↑↑↑↑
    },
    mounted() {

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .excel-import-demo-wrapper{
    width:100%;
    height:100%;
  }

</style>
